<template>
	<uv-popup ref="popupRef" closeable mode="bottom" round="28rpx">
		<view class="place-order">
			<view class="title">预约下单</view>
			<view class="form">
				<view class="form-item">
					<view class="label">租赁人信息</view>
					<view class="value" @click="handPerson">
						<text v-if="queryForm.identityNo">去修改</text>
						<text class="place" v-else>请填写您的信息</text>
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="form-item">
					<view class="label">紧急联系人</view>
					<view class="value" @click="handJj">
						<text v-if="queryForm.emergencyName">去修改</text>
						<text class="place" v-else>请填写紧急联系人</text>
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="form-item">
					<view class="label">租车方案</view>
					<view class="value" @click="handPro">
						<view class="fangan">
							<view>租金¥{{schemesInfo.rent }}/月，期数{{schemesInfo.lease }}期</view>
							<view>押金¥{{schemesInfo.deposit }}</view>
						</view>
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="form-item">
					<view class="label">电子合同</view>
					<view class="value" @click="handHt">
						<view class="weiqian" v-if="queryForm.contract">
							<text>已签署</text>
						</view>
						<view class="weiqian" v-else>
							<text>未签署,</text>
							<text>去签署</text>
						</view>
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
			</view>
			<view class="submit">
				<button class="cu-btn" @click="handSubmit">提交订单</button>
			</view>
		</view>
	</uv-popup>
	<PersonnelInfo ref="personRef" @change="queryChange" />
	<JjInfo ref="jjRef" @change="queryChange" />
	<ProgrammePop :schemes="schemes" ref="proRef" />
</template>

<script setup>
	import {
		reactive,
		ref,
		defineProps,
		inject,
		computed,
		defineEmits
	} from 'vue'
	import {
		getCapital
	} from '@/utils'
	import {
		doExendTime
	} from '@/apis/order.js'
	import PersonnelInfo from './PersonnelInfo.vue'
	import JjInfo from './JjInfo.vue'
	import ProgrammePop from './ProgrammePop.vue'
	const props = defineProps({
		info: {
			type: Object,
			default: () => {}
		},
		schemes: {
			type: Array,
			default: () => []
		},
		demandId: {
			type: Number,
			default: 0
		}
	})

	const emit = defineEmits(['success'])

	const queryForm = ref({
		identityCardFront: '',
		identityCardTail: '',
		identityNo: '',
		budgetName: '',
		cellphone: '',
		licence: '',
		demandType: '',
		productId: '',
		schemes: {},
		type: '',
		contract: '',
		lesseesAddress: '',
		emergencyName: '',
		emergencyPhone: '',
		emergencyRelation: '',
		htInfo: {}
		// identityCardFront: 'https://bc-haowanjia.oss-cn-hangzhou.aliyuncs.com/images/1692753866101148.jpg',
		// identityCardTail: 'https://bc-haowanjia.oss-cn-hangzhou.aliyuncs.com/images/1692753866101148.jpg',
		// identityNo: '412825200004039136',
		// budgetName: '小明',
		// cellphone: '18852122529',
		// licence: 'https://bc-haowanjia.oss-cn-hangzhou.aliyuncs.com/images/1692753866101148.jpg',
		// demandType: 'COMMON',
		// productId: '',
		// schemes: {},
		// type: 'EXTRACT',
		// contract: '',
		// lesseesAddress: '北京',
		// emergencyName: '小红',
		// emergencyPhone: '110',
		// emergencyRelation: '同志',
		// htInfo: {}
	})

	const queryChange = (e) => {
		queryForm.value = {
			...queryForm.value,
			...e
		}
	}

	const curren = inject('curren')
	const schemesInfo = computed(() => {
		if (props.schemes.length > 0) {
			return props.schemes[curren.value]
		}
		return {}
	})

	const personRef = ref(null)
	const handPerson = () => {
		personRef.value.handOpen(uni.$uv.deepClone(queryForm.value))
	}
	const jjRef = ref(null)
	const handJj = () => {
		jjRef.value.handOpen(uni.$uv.deepClone(queryForm.value))
	}

	const proRef = ref(null)
	const handPro = () => {
		proRef.value.handOpen()
	}

	const handHt = async () => {
		const data = await doExendTime(schemesInfo.value.lease)
		const starTime = data.startTime.split('-')
		const endTime = data.endTime.split('-')
		const params = queryForm.value
		if (!params.identityNo) {
			uni.$uv.toast('请完善租赁人信息信息')
			return
		}
		if (!params.emergencyName) {
			uni.$uv.toast('请完善紧急联系人')
			return
		}
		let htInfo = {}

		if (props.info.type === 'DEALER') {
			htInfo = {
				jia: props.info.name,
				orderNo: '',
				jiaName: props.info.merchantName,
				jiaPhone: props.info.cellphone,
				yiName: queryForm.value.budgetName,
				yiPhone: queryForm.value.cellphone,
				city: props.info.city,
				jjName: queryForm.value.emergencyName,
				jjPhone: queryForm.value.emergencyPhone,
				jjAbout: queryForm.value.emergencyRelation,
				starYear: starTime[0],
				starMonth: starTime[1],
				starDay: starTime[2],
				endYear: endTime[0],
				endMonth: endTime[1],
				endDay: endTime[2],
				jiaYear: starTime[0],
				jiaMonth: starTime[1],
				jiaDay: starTime[2],
				yiYear: starTime[0],
				yiMonth: starTime[1],
				yiDay: starTime[2],
				jiaqianImg: props.info.merchantName,
				qianImg: queryForm.value.contract,
				price: schemesInfo.value.rent,
				priceDx: getCapital(schemesInfo.value.rent),
				bzj: schemesInfo.value.deposit,
				bzjDx: getCapital(schemesInfo.value.deposit),
				qi: schemesInfo.value.lease,
				cjh: '',
				fdjh: '',
				pzh: '',
				contractSeal: props.info.contractSeal,
			}

		} else {
			htInfo = {
				orderNo: '',
				jianame: props.info.merchantName,
				jiaAddress: `${props.info.province}${props.info.city}${props.info.address}`,
				jiaZz: props.info.licenseNo,
				jiaPhone: props.info.cellphone,
				yiName: queryForm.value.budgetName,
				yiAddress: queryForm.value.lesseesAddress,
				yiCardNo: queryForm.value.identityNo,
				yiPhone: queryForm.value.cellphone,
				city: props.info.city,
				jjName: queryForm.value.emergencyName,
				jjPhone: queryForm.value.emergencyPhone,
				jjAbout: queryForm.value.emergencyRelation,
				starYear: starTime[0],
				starMonth: starTime[1],
				starDay: starTime[2],
				endYear: endTime[0],
				endMonth: endTime[1],
				endDay: endTime[2],
				jiaYear: starTime[0],
				jiaMonth: starTime[1],
				jiaDay: starTime[2],
				yiYear: starTime[0],
				yiMonth: starTime[1],
				yiDay: starTime[2],
				qianImg: queryForm.value.contract,
				price: schemesInfo.value.rent,
				priceDx: getCapital(schemesInfo.value.rent),
				bzj: schemesInfo.value.deposit,
				bzjDx: getCapital(schemesInfo.value.deposit),
				qi: schemesInfo.value.lease,
				contractSeal: props.info.contractSeal,
			}
		}
		queryForm.value.htInfo = htInfo
		uni.navigateTo({
			url: '/pagesA/car/contract?type=qian',
			events: {
				successEvent: (img) => {
					queryForm.value.contract = img
					queryForm.value.htInfo.qianImg = img
				}
			},
			success: (res) => {
				res.eventChannel.emit('acceptDataFromOpenerPage', htInfo)
			}
		})
	}

	const handSubmit = () => {
		const params = queryForm.value
		if (!params.identityNo) {
			uni.$uv.toast('请完善租赁人信息信息')
			return
		}
		if (!params.contract) {
			uni.$uv.toast('请先签署合同')
			return
		}
		if (props.demandId) {
			params.demandType = 'DEMAND'
			params.demandId = props.demandId
		}
		params.schemes = schemesInfo.value
		uni.navigateTo({
			url: '/pagesA/car/createOrder',
			success: (res) => {
				res.eventChannel.emit('editData', uni.$uv.deepClone(params))
			},
			events: {
				success: () => {
					emit('success')
				}
			}
		})
		handClose()
	}


	const popupRef = ref(null)
	const handOpen = (id) => {
		queryForm.value.productId = id
		popupRef.value.open()
	}
	const handClose = () => {
		popupRef.value.close()
	}
	defineExpose({
		handOpen
	})
</script>

<style lang="scss" scoped>
	.place-order {
		padding: 24rpx;
		padding-bottom: 58rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 58rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 58rpx);

		.title {
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.form {
			margin-top: 64rpx;

			&-item {
				display: flex;

				&:not(:first-child) {
					margin-top: 60rpx;
				}

				.label {
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.value {
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					justify-content: flex-end;

					.place {
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					.fangan {
						text-align: right;
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.weiqian {
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;

						text {
							&:last-child {
								color: #FF930D;
							}
						}
					}
				}
			}
		}

		.submit {
			margin-top: 92rpx;
			position: relative;
			z-index: 3;

			.cu-btn {
				width: 702rpx;
				height: 100rpx;
				background: #FFC434;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}
</style>